<template>
    <div>
        <van-nav-bar title="标题" left-arrow>
            <template #right>
                <van-icon name="exchange" size="20" />
            </template>
        </van-nav-bar>
        <van-cell-group>
            <van-switch-cell v-model="checked" title="开启智能排序" />
        </van-cell-group>
        <div class="gn">
            <van-icon class="l" name="smile" size="30px" color="green"/>
            <span>跑步</span>
            <van-icon name="arrow" class="r"/>
        </div>
        <div class="gn">
            <van-icon class="l" name="smile" size="30px" color="green"/>
            <span>跑步</span>
            <van-icon name="arrow" class="r"/>
        </div><div class="gn">
            <van-icon class="l" name="smile" size="30px" color="green"/>
            <span>跑步</span>
            <van-icon name="arrow" class="r"/>
        </div><div class="gn">
            <van-icon class="l" name="smile" size="30px" color="green"/>
            <span>跑步</span>
            <van-icon name="arrow" class="r"/>
        </div><div class="gn">
            <van-icon class="l" name="smile" size="30px" color="green"/>
            <span>跑步</span>
            <van-icon name="arrow" class="r"/>
        </div><div class="gn">
            <van-icon class="l" name="smile" size="30px" color="green"/>
            <span>跑步</span>
            <van-icon name="arrow" class="r"/>
        </div><div class="gn">
            <van-icon class="l" name="smile" size="30px" color="green"/>
            <span>跑步</span>
            <van-icon name="arrow" class="r"/>
        </div><div class="gn">
            <van-icon class="l" name="smile" size="30px" color="green"/>
            <span>跑步</span>
            <van-icon name="arrow" class="r"/>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            checked: true,
        }
    },
}
</script>

<style lang="scss" scoped>
    .gn{
        padding:5px 15px 15px;
        background-color: #f5f2f2;
        align-items: center;
        margin: 10px 10px;
        .l{
            text-align: center;
        }
        span{
            font-size: 15px;
            margin-left: 10px;
            margin-top: -10px;
            display: inline-block;
        }
        .r{
            float: right;
            margin-top: 10px;
        }
    }
</style>